<template>
  <div class="home-hot-item">
    <div class="hot-title">
      <h1>推荐文章</h1>
      <p>染指流沙，回绕不尽的世界繁华</p>
    </div>
    <el-carousel indicator-position="none" trigger="click">
      <el-carousel-item v-for="item in 4" :key="item">
        <el-row :gutter="15">
          <el-col :span="6" class="hot-blog-item" v-for="o in 4" :key="o">
            <div class="hot-item-img">
              <img
                src="https://ccdn.goodq.top/caches/3ddfe819fbff4df42c2816872195b7de/aHR0cHM6Ly81ZDQyNDBiMjU4OWM5LnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTkvMDcvNmI3ZWRjZTcwNDRlYjc3Y2Q2ZDllZDU4YmJjMzBlNGEtMjYweDE0Ni05MC53ZWJw.webp"
              />
            </div>
            <div class="hot-item-section">
              <p class="section-title">
                特斯拉CTO离职
                公司股价干嘛干可谓灵魂任务，他从一开始就在特斯拉工作并把马可谓灵魂任务，他从一开始就在特斯拉工作并把马可谓灵魂任务，他从一开始就在特斯拉工作并把马嘛
              </p>
              <span class="section-time">2011-01-22</span>
              <p class="section-content">
                对于特斯拉而言，JBStraube可谓灵魂任务，他从一开始就在特斯拉工作并把马斯克带进公司。资深可谓灵魂任务，他从一开始就在特斯拉工作并把马可谓灵魂任务，他从一开始就在特斯拉工作并把马可谓灵魂任务，他从一开始就在特斯拉工作并把马
              </p>
            </div>
          </el-col>
        </el-row>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          title: '',
          time: '',
          content: '',
          src: 'https://ccdn.goodq.top/caches/3ddfe819fbff4df42c2816872195b7de/aHR0cHM6Ly81ZDQyNDBiMjU4OWM5LnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTkvMDcvZWFiZTcxYjE2ZmFlMTRlMzE1MmJjNzQwMDgxODYzMGMtMjYweDE0Ni05MC53ZWJw.webp'
        }
      ]
    }
  }
}
</script>

<style lang="scss">
#modules-home {
  .home-hot-item {
    margin-top: -40px;
    .hot-title {
      text-align: center;
      & > h1 {
        font-size: 26px;
        font-style: normal;
        font-weight: bold;
        color: #000;
        vertical-align: bottom;
      }
      & > p {
        margin: 20px 0 30px 0;
        font-family: century gothic;
        font-size: 13px;
        font-weight: normal;
        color: #bababa;
        vertical-align: bottom;
      }
    }

    .el-carousel {
      width: 1190px;
      margin: 0 auto;
      .hot-blog-item {
        &:hover {
          .hot-item-img {
            img {
              transform: scale(1.03);
            }
          }
          .section-title {
            color: $theme-blue;
          }
          .section-content {
            color: #333 !important;
          }
        }
        .hot-item-img {
          width: 100%;
          height: 156px;
          border-radius: 5px;
          overflow: hidden;
          cursor: pointer;
          img {
            transition: all 0.3s ease-out !important;
            height: 100%;
            width: 100%;
            object-fit: cover;
          }
        }
        .hot-item-section {
          padding: 15px 20px 0 20px;
          color: #000;
          text-align: center;
          font-weight: normal;
          .section-title {
            font-size: 16px;
            cursor: pointer;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .section-time {
            display: block;
            font-size: 13px;
            color: #c4c4c4;
            margin: 10px 0;
          }
          .section-content {
            color: #999;
            font-size: 12px;

            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            word-break: break-all;
          }
        }
      }
    }
  }
}
</style>
